<template>
  <div class="bar-echarts">
    <chart :options="option" v-if="this.option.series.length > 0"></chart>
    <VNoData v-else></VNoData>
  </div>
</template>

<script type="text/ecmascript-6">
  import store from '@/store'
  import VNoData from '../../../../../components/VNoData/VNoData'
  export default {
    props: ['magicType'],
    components: {
      VNoData
    },
    data () {
      return {
        option: {
          title: {
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [], // 浏览器类型
            tooltip: { show: true }
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: [] // 日期
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              data: []
            }
          ]
        }
      }
    },
    watch: {
      magicType (v) {
        for (let i = 0; i < this.option.series.length; i++) {
          this.option.series[i].type = v
        }
      }
    },
    methods: {
    },
    mounted () {
      store.state.bus.$on('mountedtgtlistevent', (tabData) => {
        if (tabData.length === 0) {
          this.option.series.length = 0
          this.option.series = []
        } else {
          this.option.xAxis[0].data = []
          this.option.series = []
          this.option.legend.data = []
          tabData.tgt_list.forEach(item => {
            let val = ''
            for (let k in item) {
              if (k.indexOf('__GSD__') !== -1) {
                val = item[k]
                break
              }
            }
            for (let k in item) {
              if (k.indexOf('__GS__') !== -1) {
                if (tabData.set_list[0] === item[k]) {
                  this.option.xAxis[0].data.push(val)
                  break
                }
              }
            }
          })
          tabData.set_list.forEach(item => {
            let o = {
              name: '',
              type: 'line',
              data: []
            }
            o.name = item
            tabData.tgt_list.forEach(obj => {
              let val = ''
              for (let k in obj) {
                if (k.indexOf('__GF__') !== -1) {
                  val = obj[k]
                  break
                }
              }
              for (let k in obj) {
                if (k.indexOf('__GS__') !== -1) {
                  if (item === obj[k]) {
                    o.data.push(val)
                    this.option.legend.data.push(item)
                    break
                  }
                }
              }
            })
            this.option.series.push(o)
          })
        }
      })
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
  .bar-echarts
    text-align center
    .echarts
      width 100%
      div:first-child
        width 100% !important
    .nodata
      width 30%
      height 200px
      margin 0 auto
</style>
